<template>
	<view class="content">
		<image class="loginhead" src="../../static/common/loginhead.png"  style="width: 100%;height: 100%;" lazy-load></image>
	<!-- 	<view class="" style="height: 250upx;">
			
		</view> -->
<!-- 		<view class="" style="width: 750upx; height: 650upx;">
			<image src="../../static/common/loginhead.png" mode="" style="width: 750upx; height: 650upx;"></image>
		</view> -->
		<view class="bottem-box" :style="{ height: Wheight+'px' }">
			<view class="body login-body"  style="padding: 150upx 30px;">
				<template v-if="!status">
					<view class="login-input-box">
						<uni-icons type="person-filled" size="15" color='#00EAFF'></uni-icons>
						<input type="text" v-model="username"
						class="uni-input"
						placeholder="昵称/手机号/邮箱" />
					</view>
					<view class="login-input-box">
						<uni-icons type="locked-filled" size="15" color='#00EAFF'></uni-icons>
						<input type="text" v-model="password" password
						class="uni-input forget-input"
						placeholder="请输入密码" />
						<view class="forget u-f-ajc login-font-color" @click="forgetpsd">忘记密码</view>
					</view>
				</template>
				
				
				<!-- 手机验证码登录 -->
				<template v-else>
					<view class="login-input-box">
						<view class="phone u-f-ajc" style="color: #fff;">+86</view>
						<input type="text" v-model="phone"
						class="uni-input phone-input"
						placeholder="手机号" />
					</view>
					<view class="login-input-box">
						<input type="text" v-model="checknum"
						class="uni-input forget-input"
						placeholder="请输入验证码" />
						<view class="forget u-f-ajc login-font-color yanzhengma" :class="!codetime?'yzmbg':''"
						@tap="getCheckNum">
							<view class="u-f-ajc">{{!codetime?'获取验证码':codetime+' s'}}</view>
						</view>
					</view>
				</template>
				
				
				<button class="loin-btn" 
				:loading="loading" :class="{'user-set-btn-disable':disabled}" 
				type="primary" @tap="submit" :disabled="disabled">登录</button>
				<!-- 登录状态切换 -->
				<view class="login-status u-f-ajc login-padding login-font-color"  
				@tap="changeStatus">
					{{status?'账号密码登录':'验证码登录'}}<view class="icon iconfont icon-jinru login-font-color"></view>
				</view>
			</view>		
		</view>
	</view>
</template>

<script>
	var md5 = require('../../common/md5.js');
	// var sign = require('../../common/sign.js');
	import uniStatusBar from "../../components/uni-status-bar/uni-status-bar.vue";
	import otherLogin from "../../components/home/other-login.vue";
	export default {
		components:{
			uniStatusBar,
			otherLogin
		},
		data() {
			return {
				status:false,//false代表账号密码登录，true代表手机验证码登录
				disabled:false,
				loading:false,
				username:"sa",
				password:"123",
				phone:"",
				checknum:"",
				codetime:0,
				code:null,
				Wheight:300
			}
		},
		watch:{
			username(val){
				this.OnBtnChange();
			},
			password(val){
				this.OnBtnChange();
			},
			phone(val){
				this.OnBtnChange();
			},
			checknum(val){
				this.OnBtnChange();
			}
		},
		// 实现小程序分享
		onShareAppMessage(){
		} ,
		onLoad() {
			var _self=this
			uni.getSystemInfo({
			  success (res) {
				  _self.Wheight=res.windowHeight-uni.upx2px(650) 
			 }
			})
		},
		methods: {
			// 忘记密码
			forgetpsd(){
				uni.navigateTo({
				    url: '../forgotpsd/forgotpsd'
				});
			},
			// 验证手机号码
			isPhone(){
				let mPattern = /^1[34578]\d{9}$/; 
				return mPattern.test(this.phone);
			},
			// 获取验证码
			async getCheckNum(){
				if(this.codetime > 0)return;
				// 验证手机号合法性
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码', icon:"none" });
				}
				// 请求服务器，发送验证码
				let [err,res] = await this.$http.post("/selectTel",{
					tel:this.phone
				});
				// 请求错误处理
				if (!this.$http.errorCheck(err,res)) return
				// 发送成功，开启倒计时
				this.codetime=60;
				let timer=setInterval(()=>{
					this.codetime--;
					if(this.codetime < 1){
						clearInterval(timer);
						this.codetime=0;
					}
				},1000);
				if(res.data == true) {
					let [err1,res1] = await this.$http.post("/sendcode",{
						"phonenumber":this.phone
					})
					// 请求错误处理
					if (!this.$http.errorCheck(err1,res1)){
						clearInterval(timer);
						this.codetime=0;
						return
					} 
					if(res1 == "") {
						uni.showToast({ title: '手机号码输入错误！', icon:"none" });
					} else {
						if(res1.data.name != "" && res1.data.name != null && res1.data.name != undefined) {
							this.code=res1.data.code
							// 本地存储
							uni.setStorageSync("name",res1.data.name);
							uni.setStorageSync("pno", res1.data.Pno);
						}else{
							uni.showToast({ title: '密码错误或者该用户名没有注册！', icon:"none" });
						}
					}
				} else {
					clearInterval(timer);
					this.codetime=0;
					uni.showToast({ title: '该手机号码未注册！', icon:"none" });
				}
			},
			// 初始化表单
			initInput(){
				this.username='sa';
				this.password='123';
				this.phone='';
				this.checknum='';
			},
			// 改变按钮状态
			OnBtnChange(){
				if( (this.username && this.password)||(this.phone && this.checknum) ){
					this.disabled=false; return;
				}
				this.disabled=true;
			},
			// 切换登录状态
			changeStatus(){
				this.initInput();
				this.status = !this.status;
			},
			// 返回上一步
			back(){
				uni.navigateBack({ delta: 1 });
			},
			// 提交登录
			async submit(){
				if(!this.username){
					return uni.showToast({ title: '请输入用户名', icon:"none" });
				}
				if(!this.password){
					return uni.showToast({ title: '请输入密码', icon:"none" });
				}
				// 账号密码登录
				if(!this.status){
					return this.User.login({
						url:"/user/login",
						data:{
							no:this.username,
							password:this.password
							// password:md5.hex_md5(this.password),
						}
					})
				}
				// 验证码登录
				// 验证手机号合法性
				if(!this.isPhone()){
					return uni.showToast({ title: '请输入正确的手机号码', icon:"none" });
				}
				if(!this.code){
					return uni.showToast({ title: '请获取验证码', icon:"none" });
				}
				if(this.checknum==this.code){
					// 成功提示
					uni.showToast({ title: '登录成功' });
					uni.switchTab({
						url:"../index/index"
					})
				}else{
					uni.showToast({ title: '验证码输入有误！', icon:"none" });
				}
				// 验证码错误！
				// return this.User.login({
				// 	url:"/user/phonelogin",
				// 	data:{
				// 		phone:this.phone,
				// 		code:this.checknum
				// 	}
				// });
			}
		}
	}
</script>

<style lang="less" scoped>
@import "../../common/form.css";
page,.content{
	position: relative;
	background-color: #002A76;
	width: 750upx;
	height: 100%;
	// background-image: url("../../static/common/loginhead.png");
}
.bottem-box{
	width: 750upx;
	// background: linear-gradient(#002A76,#000350);
	// background: linear-gradient(#032c96,#000350);
}
.uni-page{
	/* position: relative; */
}
// .login-body{
// 	position: absolute;
// 	width: 100%;
// 	margin-right: 20upx;
// 	box-sizing: border-box;
// 	padding: 10upx;
// 	.uni-input {
// 		background: none;
// 	    color: #fff;
// 	}
// }
.login-body{
	position: absolute;
	top:650upx;
	width: 100%;
	margin-right: 20upx;
	box-sizing: border-box;
	padding: 10upx;
	.uni-input {
		background: none;
	    color: #fff;
	}
}
.login-status{
	position: absolute;
	width: 100%;
}
.background-img {
	background: url(../../static/common/loginhead.png) no-repeat fixed 100% 100%;
	background-size: cover;
	height: 100%;
}
.login-font-color{ color: #BBBBBB; }
.login-padding{ padding: 20upx 0; }
.icon-guanbi{
	position: fixed;
	top: 60upx;
	left: 30upx;
	font-size: 40upx;
	font-weight: bold;
	color: #332F0A;
	z-index: 100;
}
.loginhead{ 
	width: 100%;
	height: 100%;
	/* z-index: -1; */
	position: absolute;
 }
.loin-btn{
	margin: 55upx 20px;
	// margin-top: 55upx;
	background: #4E6EF2!important;
}
.other-login-title{
	position: relative;
}
.other-login-title:before,.other-login-title:after{
	content: "";
	position: absolute;
	background: #BBBBBB;
	height: 1upx;
	width: 100upx;
	top: 50%;
}
.other-login-title:before{
	left: 25%;
}
.other-login-title:after{
	right: 25%;
}
.login-input-box{
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 20px;
	// border-bottom: 1px solid #fff;
	border-bottom: 1px solid #00EAFF;
}
.login-input-box .forget-input{
	padding-right: 150upx;
}
.login-input-box .forget,.login-input-box .phone{
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 100;
}
.login-input-box .forget{
	width: 150upx;
	right: 0;
}
.login-input-box .phone{
	width:100upx;
	left: 0;
	font-weight: bold;
}
.login-input-box .phone-input{
	padding-left: 100upx;
}
.yanzhengma view{
	border-radius: 10upx;
	font-size: 25upx;
	width: 150upx;
	padding: 10upx 0;
}
.yzmbg view{
	color: #fff;
}
</style>
